<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css" id="css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				/*
				这里只要是absolute，那么就会脱离文档流。
				这样就可以默认指定高度和宽度。
				有点像 inline-block。
				*/
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;

				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
			}

			ul>li {
				position: absolute;
				left: 50%;
				top: 0;

				list-style: none;
				width: 2px;
				height: 10px;
				background: black;
				/*这里的基点是往下移动100px*/
				transform-origin: center 100px;
			}

			/*css可以处理连续元素中的，一定间隔的元素属性*/
			ul>li:nth-child(5n+1) {
				height: 15px;
			}

			#wrap>.hour {
				position: absolute;
				left: 97px;
				top: 50%;
				transform: rotate(0deg);
				transform-origin: top;
				width: 6px;
				height: 40px;
				background: black;
			}

			#wrap>.min {
				position: absolute;
				left: 98px;
				top: 50%;
				transform: rotate(0deg);
				transform-origin: top;
				width: 4px;
				height: 60px;
				background: gray;
			}

			#wrap>.sec {
				position: absolute;
				left: 99px;
				top: 50%;
				transform: rotate(0deg);
				transform-origin: top;
				width: 2px;
				height: 80px;
				background: red;
			}

			#wrap>.icon {
				position: absolute;
				left: 90px;
				top: 90px;
				transform-origin: center;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- 可以在17素材网找现成的 -->
		<div id="wrap">
			<ul>
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>

			<!-- <script type="text/javascript">
				window.onload = function() {
					var ulNode = document.querySelector("#wrap>ul");
					var liHtml = "";
					var styleNode = document.querySelector("#css");
					var cssText = "";

					for (var i = 1; i < 61; i++) {
						liHtml += "<li></li>";
						cssText += "ul>li:nth-child(" + (i) + ") {transform: rotate(" + (i * 6 - 6) + "deg);}";
					}
					ulNode.innerHTML = liHtml;
					styleNode.innerHTML += cssText;
				}
			</script> -->

			<script type="text/javascript">
				var hourNode = null;
				var minNode = null
				var secNode = null;
				
				function move() {
					if(!(hourNode||minNode||secNode)) return false;
					
					var date = new Date();
					var h = date.getHours();
					var m = date.getMinutes();
					var s = date.getSeconds();

					hourNode.style.transform = "rotate(" + (h * 30) + "deg)";
					minNode.style.transform = "rotate(" + (m * 6) + "deg)";
					secNode.style.transform = "rotate(" + (s * 6) + "deg)";
				}

				setInterval(move, 1000)

				window.onload = function() {
					hourNode = document.querySelector("#wrap>.hour");
					minNode = document.querySelector("#wrap>.min");
					secNode = document.querySelector("#wrap>.sec");

					var ulNode = document.querySelector("#wrap>ul");
					var liHtml = "";
					var styleNode = document.createElement("style");
					var cssText = "";

					for (var i = 1; i < 61; i++) {
						liHtml += "<li></li>";
						cssText += "ul>li:nth-child(" + (i) + ") {transform: rotate(" + (i * 6 - 6) + "deg);}";
					}
					ulNode.innerHTML = liHtml;
					// 最好创建另一个style标签，这样有两个标签比较好。 
					styleNode.innerHTML = cssText;
					document.head.appendChild(styleNode);
				}
			</script>
		</div>
	</body>
</html>
